<template>
    <div class="home">

      <div :class="{touchBar:isFix}" style="width: 100%;overflow-x:scroll;-webkit-overflow-scrolling:touch;">
        <tab :style="{ width: widthComputed + 'px' }" :line-width=2 active-color='#ff4d4d' v-model="index">
          <tab-item class="vux-center" :selected="demo2 == item.name" v-for="(item, index) in goods" @click="demo2 = item.name" :key="index" @on-item-click="handler(item,index)">{{item.name}}</tab-item>
        </tab>
      </div>

      <div v-for="(item, index) in goods"  v-show="index==current">
        <div class="home-flex-box" v-for="(food,index) in item.foods">
          <div class="flex_l"><img :src="food.img" alt=""></div>
          <div class="flex_r">
              <p class="food-name">{{food.name}}</p>
              <p class="food-num">月售<span>{{food.sold}}份</span></p>
              <p class="food-price"><span class="price-icon">￥</span>{{food.price*0.01 | datadel}}</p>
              <Counter :food="food" ></Counter>
          </div>
        </div>
      </div>
      
      <Shopcart  :select-foods="selectFoods" v-show="isShop"></Shopcart>
    </div>

</template>

<script>
import Vue from 'vue'
import { Tab, TabItem, Swiper, SwiperItem, Scroller } from 'vux'
import Tabbar from '../common/Tabbar'
import Counter from '../common/Counter'
import Shopcart from '../common/Shopcart'



export default {
  components: {
    Tab, 
    TabItem, 
    Swiper, 
    Scroller,
    SwiperItem,
    Shopcart,
    Tabbar,
    Counter
  },
  data () {
    return {
      isFix:false,
      computedHeight:'800px',
      heightVal:null,
      demo2: '',
      index: 0,
      height:'',
      widthComputed:null,
      demo06_list: urlList,
      isCart:true,
      isMask:false,
      isShop:false,
      current:0,
      goods:[],
      shopFood:[],
      show: false,
      showNoScroll: false,
      showHideOnBlur: false,
      canteenlist:null,
      defaultCanteen:''
    }
  },
  computed: {
    selectFoods() {
        let foods = [];
        let total =null;
        this.goods.forEach((good) => {
          good.foods.forEach((food) => {
            if (food.count) {
              foods.push(food);
            }
          });
        });
        foods.length>0?this.isShop=true:this.isShop=false;
        this.$store.commit('SELECTED_FOODS',foods);
        this.$store.commit('COM_TOTAL',foods);
        foods = 
        return foods;
    },
  },
  methods:{
    scrollHander(){
      if(parseInt(window.scrollY)>180){
        this.isFix = true;
      }else{
        this.isFix = false;
      }
    },
    maskActive() {
      this.isMask = !this.isMask;
      this.height = this.$refs.abc.offsetHeight;
    },
    foodPull(id) {
      this.$http.get('/api/shops/'+id+'/foods').then((res) => {
          this.shopFood = res.body;
      });
      return this.shopFood
    },
    shopPull(id) {
      this.$http.get('/api/canteens/'+id+'/shops').then((res) => {
        //取窗口列表
        var shops = res.body.data;
        if(shops.length>0){
          if(shops.length>=3){
            this.widthComputed = shops.length*140;
          }else{
            this.widthComputed = 375;
          }
          this.demo2 = shops[0].name;
          this.$http.get('/api/shops/'+shops[0].id+'/foods').then((res) => {
            var shopFood = res.body;
            for(var i=0;i<shops.length;i++){
              if(i==0){
                this.goods.push({"name":shops[i].name,"id":shops[i].id,"foods":shopFood});
              }else{
                this.goods.push({"name":shops[i].name,"id":shops[i].id,"foods":[]});
              }
            }
          });
        }else{
          this.goods = []; 
        }
      });
    },
    handler(item,index) {
      this.current = index;
      this.$http.get('/api/shops/'+item.id+'/foods').then((res) => {
          var foodArr = res.body;
          for(var i=0;i<this.goods.length;i++){
            if(this.goods[i].id == item.id && this.goods[i].foods.length == 0){
              this.goods[i].foods = foodArr;
            }
          }
      });
    }
  },
  created() {
    this.$http.get('/api/delivery-addresses/default').then(function(res){
        let campusId = res.body.data.campus_id;
        this.$http.get('/api/campuses/'+campusId+'/canteens').then(function(res){
          this.canteenlist = res.body;
          let id = this.canteenlist[0].id;
          //设置默认食堂
          this.defaultCanteen = this.canteenlist[0].text;
          this.shopPull(id);
          this.canteenlist[0].status = 1;
        });
    });
  },
  mounted() {

  }
}

</script>

<style scoped lang="less">
@import '~vux/src/styles/close';

.home {
  text-align: center;
  padding-bottom:150px;
}
.home .weui-mask{
  margin-top:46px;
  z-index:101;
  opacity: 1;
}
.home .icon-Ge_Xiaoxi{
  font-size: 20px;
}
.home-flex-box{
  display: -webkit-flex;
  display: flex;
}
.flex_l{
  flex:4;
  -webkit-flex: 4;
  padding: 0.8rem 1.2rem;
}
.flex_l img{
  height: 10rem;
  width: 10rem;
  border-radius: 0.5rem;
}
.flex_r{
  flex:8;
  -webkit-flex:8;
  position: relative;
  padding-top: 20px;
}
.flex_r p{
  text-align: left;
  font-size:16px;
}
.flex_r:before{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #bababa;
  transform: translateX(0.5);
  -webkit-transform: scaleY(0.5);
}
.food-price{
  position: absolute;
  left:0px;
  bottom:5px;
  font-size:24px!important;
  color:#ff4d4d;
}
.food-price span{
  font-size:14px;
}
.food-num{
  font-size: 14px;
}
.food-num span{
  color:#ff4d4d;
}
.home-swiper{
  margin-top: 46px;
}
.touchBar{ 
  position: fixed;  
  top: 46px;
  left:0;
  z-index: 100;
}
/* 首页食堂列表 */
.canteenlist{
  background-color: #fff;
  text-align: left;
  position: fixed;
  top: 46px;
  left: 0px;
  width: 100%;
  z-index: 200;
}
.canteenlist li{
  position: relative;
  padding:10px 15px;
  font-size: 16px;
}
.canteenlist li:after{
  content: " ";
  position: absolute;
  right:0;
  left: 0;
  bottom: 0;
  background-color: #D9D9D9;
  width: 100%;
  height: 1px;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.default-canteen .iconfont{
  margin-left:0.6rem;
}
</style>
